import { ChangeDetectionStrategy, Component, Input, TemplateRef } from '@angular/core';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { BreadcrumbComponent } from './breadcrumb.component';
import { BreadcrumbModule } from './breadcrumb.module';
import { TypeUtils } from '../core/api';
import { MenuItem } from '../core/types';

@Component({
  template: `
    <lv-breadcrumb [lvItems]="lvItems" [lvSeparator]="lvSeparator" [lvFullPath]="lvFullPath"></lv-breadcrumb>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
class TestBreadcrumbComponent {
  @Input() lvItems: MenuItem[];
  @Input() lvSeparator: string | TemplateRef<void>;
  @Input() lvFullPath: boolean = true;
  public typeUtils = TypeUtils;

  onclick() {}
}

describe('BreadcrumbComponent', () => {
  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [BreadcrumbComponent, TestBreadcrumbComponent],
      imports: [BreadcrumbModule],
      teardown: { destroyAfterEach: false },
    }).compileComponents;
  }));

  describe('render', () => {
    let component: TestBreadcrumbComponent;
    let fixture: ComponentFixture<TestBreadcrumbComponent>;
    const renderComponent = param => {
      for (const [key, value] of Object.entries(param)) {
        component[key] = value;
      }
      fixture.detectChanges();
      expect(fixture).toMatchSnapshot();
    };

    beforeEach(() => {
      fixture = TestBed.createComponent(TestBreadcrumbComponent);
      component = fixture.componentInstance;
    });

    it('with default', () => {
      renderComponent({
        lvItems: [
          {
            id: '1',
            label: 'Home',
          },
          {
            id: '2',
            label: 'Components',
            routerLink: '/components/layout',
          },
          {
            id: '3',
            label: 'Breadcrumb',
          },
        ],
      });
    });

    it('with showing last separator ', () => {
      renderComponent({
        lvFullPath: false,
        lvItems: [
          {
            id: '1',
            label: 'Home',
          },
          {
            id: '2',
            label: 'Components',
            routerLink: '/components/layout',
          },
          {
            id: '3',
            label: 'Breadcrumb',
          },
        ],
      });
    });

    it('with text overflow', () => {
      renderComponent({
        lvItems: [
          {
            id: '1',
            label: 'Home',
          },
          {
            id: '2',
            label: 'ComponentsComponentsComponentsComponentsComponents',
            width: '30px',
          },
          {
            id: '3',
            label: 'GeneralGeneralGeneralGeneralGeneral',
            width: '30px',
          },
          {
            id: '4',
            label: 'Breadcrumb',
          },
        ],
      });
    });

    it('with items', () => {
      renderComponent({
        lvItems: [
          {
            id: '1',
            label: 'Home',
          },
          {
            id: '2',
            label: 'Components',
            routerLink: '/components/layout',
          },
          {
            id: '3',
            label: 'General',
            items: [
              {
                id: '31',
                label: 'Home',
              },
              {
                id: '32',
                label: 'Components',
                routerLink: '/components/layout',
              },
            ],
          },
          {
            id: '4',
            label: 'Breadcrumb',
          },
        ],
      });
    });

    it('with custom separator', () => {
      renderComponent({
        lvItems: [
          {
            id: '1',
            label: 'Home',
          },
          {
            id: '2',
            label: 'Components',
            routerLink: '/components/layout',
          },
          {
            id: '3',
            label: 'Breadcrumb',
          },
        ],
        lvSeparator: '|',
      });
      const separator = fixture.nativeElement.querySelector('.breadcrumb-separator');
      expect(separator.textContent).toContain('|');
    });
  });

  describe('work', () => {
    let component: TestBreadcrumbComponent;
    let fixture: ComponentFixture<TestBreadcrumbComponent>;

    it('with click', () => {
      const fn = jest.fn();
      fixture = TestBed.createComponent(TestBreadcrumbComponent);
      component = fixture.componentInstance;
      component.lvItems = [
        {
          id: '1',
          label: 'Home',
          disabled: true,
          onClick: () => fn(),
        },
        {
          id: '2',
          label: 'Components',
          routerLink: '/components/layout',
        },
        {
          id: '3',
          label: 'Breadcrumb',
          onClick: () => fn(),
        },
      ];
      fixture.detectChanges();
      const items = fixture.nativeElement.querySelectorAll('.breadcrumb-item');
      items[0].dispatchEvent(new Event('click'));
      expect(fn).toBeCalledTimes(0);

      items[2].dispatchEvent(new Event('click'));
      expect(fn).toBeCalledTimes(1);
    });
  });
});
